import React, { useEffect, useState } from 'react';

import { Layout, Menu } from 'antd';

const { Header } = Layout;

const MyHeader = () => {
  const [selectedKey, setSelectedKey] = useState<string>('1');
  const handleClick = (e: { key: React.SetStateAction<string> }) => {
    console.log('1');
    setSelectedKey(e.key);
  };
  return (
    <>
      <Header className="header">
        <div className="logo" />
        <Menu
          onClick={handleClick}
          selectedKeys={[selectedKey]}
          theme="dark"
          mode="horizontal"
        >
          <Menu.Item key="1">nav11111 1</Menu.Item>
          <Menu.Item key="2">nav 2</Menu.Item>
          <Menu.Item key="3">nav 3</Menu.Item>
        </Menu>
      </Header>
    </>
  );
};

export default MyHeader;
